<template>
    <div class="container">
        <el-menu default-active="0" class="el-menu-vertical-demo" @select="handleOpen" background-color="#545c64" text-color="#fff" active-text-color="#ffd04b" style="width:200px;height:100%;">
            <img src="./img/logo.png" alt="">
            <el-menu-item-group>
                <el-menu-item index="0">
                    <svg v-if="!flagArr[0]" class="icon ">
                        <use xlink:href="#icon-shouye-zhihui-bai"></use>
                    </svg>
                    <svg v-else class="icon ">
                        <use xlink:href="#icon-shouye-huang"></use>
                    </svg>
                    &nbsp;&nbsp;
                    <span slot="title">首页</span>
                </el-menu-item>
                <el-menu-item index="1">
                    <svg v-if="!flagArr[1]" class="icon ">
                        <use xlink:href="#icon-yonghuxinxiguanli-bai-copy"></use>
                    </svg>
                    <svg v-else class="icon ">
                        <use xlink:href="#icon-yonghuxinxiguanli-huang"></use>
                    </svg>
                    &nbsp;&nbsp;
                    <span slot="title">用户信息</span>
                </el-menu-item>
                <el-menu-item index="2">
                    <svg v-if="!flagArr[2]" class="icon ">
                        <use xlink:href="#icon-cheliangxinxi-bai-copy"></use>
                    </svg>
                    <svg v-else class="icon ">
                        <use xlink:href="#icon-cheliangxinxi-huang"></use>
                    </svg>
                    &nbsp;&nbsp;
                    <span slot="title">车辆信息</span>
                </el-menu-item>
                <el-menu-item index="3">
                    <svg v-if="!flagArr[3]" class="icon ">
                        <use xlink:href="#icon-liuya-bai-copy"></use>
                    </svg>
                    <svg v-else class="icon ">
                        <use xlink:href="#icon-liuya-huang"></use>
                    </svg>
                    &nbsp;&nbsp;
                    <span slot="title">用户留言</span>
                </el-menu-item>
                <el-menu-item index="4">
                    <svg v-if="!flagArr[4]" class="icon ">
                        <use xlink:href="#icon-shezhi-bai-copy"></use>
                    </svg>
                    <svg v-else class="icon ">
                        <use xlink:href="#icon-shezhi-huang"></use>
                    </svg>
                    &nbsp;&nbsp;
                    <span slot="title">设置</span>
                </el-menu-item>
                <el-menu-item index="5">
                    <svg v-if="!flagArr[5]" class="icon ">
                        <use xlink:href="#icon-tuichu-bai-copy"></use>
                    </svg>
                    <svg v-else class="icon ">
                        <use xlink:href="#icon-tuichu-huang"></use>
                    </svg>
                    &nbsp;&nbsp;
                    <span slot="title">退出</span>
                </el-menu-item>
            </el-menu-item-group>
        </el-menu>
        <div v-if="flagArr[0]" class="smallContainer">
            <el-row :gutter="200">
                <el-col :span="6">
                    <div>
                        <el-statistic value=200000 title="用户总数"></el-statistic>
                    </div>
                </el-col>
                <el-col :span="6">
                    <div>
                        <el-statistic value=200000 title="平台车辆总数"></el-statistic>
                    </div>
                </el-col>
                <el-col :span="6">
                    <div>
                        <el-statistic value=150 title="已租出"></el-statistic>
                    </div>
                </el-col>
                <el-col :span="6">
                    <div>
                        <el-statistic value=150 title="留言"></el-statistic>
                    </div>
                </el-col>
            </el-row>
        </div>
    </div>
</template>
<script>
import { ElMessage } from "element-plus";
export default {
    data() {
        return {
            flagArr: [true, ...new Array(6).fill(false)],
        };
    },
    methods: {
        handleOpen(key) {
            this.flagArr = new Array(6).fill(false);
            this.flagArr[key] = true;
        },
    },
    mounted() {
        if (window.location.hash.split("?").indexOf("true") != -1) {
            console.log("登录成功");
        } else {
            ElMessage.error("请登录");
            window.open(`${window.origin}/#/login`, "_self");
        }
    },
};
</script>
<style scoped lang="scss">
.container {
    height: 100vh;
    display: flex;
    .icon {
        width: 2.5em;
        height: 1.5em;
        vertical-align: -0.15em;
        fill: currentColor;
        overflow: hidden;
    }
    .smallContainer {
        margin-left: 20px;
        width: 100%;
        margin-top: 100px;
    }
}
</style>
